<template>
  <div>
    <!--        <i style="color:#fff;" class="fa fa-th fa-lg" title="布局精灵"  v-popover:popover4></i>-->
    <div @mousemove="headerLayout" @mouseleave="headerLayoutleave">
      <!-- <svg-icon v-popover:popover4 class-name="table-icon" icon-class="table" /> -->
      <img ref="headerLayout" style="margin-top: 15px" :src="header_layoutA" alt="" srcset="">
    </div>
    <el-popover
      ref="popover4"
      v-model="visible"
      placement="bottom"
      width="400"
      trigger="click"
    >
      <draggable v-model="list" class="wrapper">
        <div v-for="item in list" :key="item.index" class="item">
          <span class="boxWrap">{{ item.title }}</span>
        </div>
      </draggable>
      <el-row>
        <el-button type="success" style="float:left;" size="mini" @click="save()">应用</el-button>
        <el-button style="float:left;" size="mini" @click="resetDefault()">恢复默认</el-button>
        <el-button type="primary" style="float:right;" size="mini" @click="visible = false">关闭</el-button>
      </el-row>
    </el-popover>
  </div>
</template>

<script>
import header_layoutA from '@/assets/image/icon/header-layoutA.png'
import header_layoutB from '@/assets/image/icon/header-layoutB.png'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
export default {
  name: 'Index',
  components: {
    draggable
  },
  data() {
    return {
      visible: false,
      list: [
        {
          index: 1,
          title: '统计列表'
        },
        {
          index: 2,
          title: 'echarts折线图'
        },
        {
          index: 3,
          title: 'echarts图列表'
        }
      ],
      header_layoutA,
      header_layoutB
    }
  },
  mounted() {
    Cookies.set('scriptLayoutDefault', this.list)
  },
  methods: {
    save() {
      this.$message({
        message: '设置门户成功',
        type: 'success'
      })
      this.$store.dispatch('app/setScriptLayout', this.list)
    },
    resetDefault() {
      this.list = JSON.parse(Cookies.get('scriptLayoutDefault'))
      this.$store.dispatch('app/setScriptLayout', this.list)
    },
    headerLayout() {
      this.$refs.headerLayout.src = this.header_layoutB
    },
    headerLayoutleave() {
      this.$refs.headerLayout.src = this.header_layoutA
    }
  }
}
</script>

<style lang="scss" scoped>
    .wrapper{
        .item{
            margin: 1rem;
            .boxWrap {
                margin: 1rem;
                display: block;
                width: 20rem;
                height: 5rem;
                border:1px solid #ccc;
            }
        }
    }

</style>
